<template>
    <div class="fillcontain">
        <head-top/>
        <div class="table_container">
            <el-table
                    :data="tableData"
                    style="width: 100%"
            >
                <el-table-column
                        label="案例ID"
                        prop="id"
                />
                <el-table-column
                        label="案例名字"
                        prop="name"
                />
                <el-table-column
                        label="案例内容"
                        prop="description"
                />
                <el-table-column
                        label="操作"
                        width="200"
                >
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>


            <div class="Pagination">
                <el-pagination
                        :current-page="currentPage"
                        :page-size="20"
                        layout="total, prev, pager, next"
                        :total="tableData.length"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "myExample",
        data() {
            return {
                offset: 0,
                limit: 20,
                count: 0,
                tableData: [],
                currentPage: 1,
            }
        },
        created() {
            this.initData();
        },
        methods: {
            initData() {
                this.tableData = [
                    {
                        id: 1,
                        name: '实例1',
                        description: '实例1描述'
                    },
                    {
                        id: 2,
                        name: '实例2',
                        description: '实例2描述'
                    },
                    {
                        id: 3,
                        name: '实例3',
                        description: '实例3描述'
                    }
                ];
            }
        },
    }
</script>

<style scoped>

</style>
